<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div" style="width: 200px;height: 200px; background: burlywood">
    </div>
    <script>
        //1.点击div 2s后变粉色
        let ad = document.getElementById("div")
        // ad.addEventListener("click", function(){
        //     console.log(this) //this是ad
        //     setTimeout(function(){
        //         console.log(this) //this是window
        //         this.style.background = 'pink' //报错
        //     }, 2000)
        // })
        ad.addEventListener("click", function() {
            console.log(this) //this是ad
            setTimeout(()=>{
                console.log(this) //this是ad
                this.style.background = 'pink'
            }, 2000)
        })
        //2.过滤数组中的偶数s
        const arr = [1,2,3,4,5]
        let res = arr.filter(function(item) {
            if (item % 2 === 0) {
                return true
            }
            return false
        })
        console.log(res)
        //箭头函数等价写法
        let res2 = arr.filter(item => item % 2 === 0)
        console.log(res2)

        //总结：箭头函数适合用于与this无关的回调函数，不适合与this有关的回调（如事件回调，对象的方法）
    </script>
</body>
</html>